<div class='box' style='min-height: 600px;'>
  <h3>{{ 'Experiments Templates'|trans }}</h3>
  <hr>
  {% include('show-templates-select.html') %}

  {% if templateData %}
    <div class='row mt-3'>
      <!-- NAME OF TPL AND OWNER -->
      <div class='col'>
        <h4>{{ templateData.fullname|raw }} - {{ templateData.name|raw }}</h4>
      </div>

      <div class='col-2 text-right'>
        <!-- MORE OPTIONS DROPDOWN MENU (···) -->
        <div class='dropdown'>
          <div data-toggle='dropdown' aria-label='{{ 'More options'|trans }}' aria-haspopup='true' aria-expanded='false' title='{{ 'More options'|trans }}' role='button'>
            <i class='fas fa-ellipsis-h fa-2x'></i>
          </div>
          <div class='dropdown-menu'>
            <!-- IMPORT -->
            <a href='#' class='dropdown-item importTpl' data-id='{{ templateData.id }}'><i class='fas fa-file-import mr-1'></i>{{ 'Import to your profile'|trans }}</a>
            <!-- CREATE EXPERIMENT FROM TPL -->
            <a href='experiments.php?create=true&tpl={{ templateData.id }}' class='dropdown-item'><i class='fas fa-pencil-alt mr-1'></i>{{ 'Create experiment from template'|trans }}</a>
          </div>
        </div>
      </div>
    </div>


    {% if templateData.tags|length > 0 %}
      <span class='tags'><i class='fas fa-tags'></i></span>
      {% set tagsValueArr = templateData.tags|split('|') %}
      {% for tag in tagsValueArr %}
        <span class='tag'>{{ tag|raw }}</span>
      {% endfor %}
    {% endif %}

    <div class='mt-2'>
      {% if templateData.canread > 0 %}
        {% for teamGroup in teamGroupsArr if teamGroup.id == templateData.canread %}
          <i class='fas fa-eye'></i> {{ teamGroup.name }}
        {% endfor %}
      {% else %}
        <i class='fas fa-eye'></i> {{ templateData.canread }}
      {% endif %}

      {% if templateData.canwrite > 0 %}
        {% for teamGroup in teamGroupsArr if teamGroup.id == templateData.canwrite %}
          <i class='fas fa-pencil-alt'></i> {{ teamGroup.name }}
        {% endfor %}
      {% else %}
        <i class='fas fa-pencil-alt'></i> {{ templateData.canwrite }}
      {% endif %}
    </div>

    <div id='body_view' class='txt'>{{ templateData.body|raw }}</div>
    {% include('steps-links-view.html') %}
  {% endif %}
</div>
